<template>
    <div class="flex">
        <V3Echarts :width="props.width" :height="props.height" :options="option" />
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import * as echarts from 'echarts'
import { AXIS_LABEL, Bar_TOOLTIP, LEGEND, LINE_TOOLTIP, YAXIS_NAME } from '../chartConfig'
import V3Echarts from '@/stories/components/V3Echarts/index.vue'

const props = defineProps({
    chartData: {
        type: Object,
        default: () => {
            return {
                unit: '辆',
                xAxis: ['12/3', '12/4', '12/5', '12/6', '12/7', '12/8', '12/9'],
                value: [
                    {
                        name: '入园',
                        data: [47.9, 55.2, 61.2, 68.3, 79.5, 82, 88.44]
                    },
                    {
                        name: '出园',
                        data: [27.9, 25.2, 31.2, 38.3, 39.5, 22, 38.44]
                    }
                ]
            }
        }
    },
    color: {
        type: Array,
        default: () => {
            return ['#6893ff', '#64eca4', '#ffdf87', '#e5e3a8']
        }
    },
    width: {
        type: Number,
        default: 800
    },
    height: {
        type: Number,
        default: 400
    },
    splitNumber: {
        type: Number,
        default: 10
    },
    barWidth: {
        type: Number,
        default: 10
    }
})
let option = ref<any>({})

const initChart = () => {
    option.value = option1()
}

const option1 = () => {
    let series: any = []
    const axis_label = JSON.parse(JSON.stringify(AXIS_LABEL))
    let max = 0
    props.chartData.value.forEach((item: any, index: number) => {
        max = item.data.reduce((prev: any, cur: any) => {
            return Math.max(prev, cur)
        }, max)
        series.push({
            name: item.name,
            type: 'bar',
            data: item.data,
            symbol: 'none',
            barWidth: props.barWidth,
            yAxisIndex: item.yAxisIndex || 0,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        {
                            offset: 0.05,
                            color: props.color[index] + '' // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: props.color[index] + '11' // 100% 处的颜色
                        }
                    ],
                    false
                )
            },
            universalTransition: {
                enabled: true,
                delay: function () {
                    return Math.random() * 400
                }
            }
        })
    })

    return {
        tooltip: Bar_TOOLTIP,
        color: props.color,
        legend: {
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 10,
            top: '5%',
            right: '5%',
            textStyle: LEGEND,
            data: props.chartData.value.map((item: any) => item.name)
        },
        grid: {
            top: '20%',
            left: '0%',
            right: '5%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: props.chartData.xAxis,
                axisLabel: axis_label,
                axisLine: {
                    show: true
                },
                boundaryGap: true,
                splitLine: {
                    show: false //隐藏或显示
                }
            },
            {
                data: props.chartData.xAxis,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false //隐藏X轴刻度
                },
                axisLabel: {
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: props.chartData.unit,
                offset: 0,
                axisLine: {
                    show: true
                },
                axisLabel: AXIS_LABEL,
                nameGap: 10,
                splitNumber: props.splitNumber,
                nameTextStyle: YAXIS_NAME,
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(204,204,204,0.5)',
                        width: 1
                    }
                }
            },
            {
                type: 'value',
                name: props.chartData.unit2,
                position: 'right',
                offset: 0,
                axisLine: {
                    show: true
                },
                axisLabel: AXIS_LABEL,
                nameGap: 10,
                splitNumber: props.splitNumber,
                nameTextStyle: YAXIS_NAME,
                splitLine: {
                    show: false //隐藏或显示
                }
            }
        ],
        series: [
            ...series,
            {
                xAxisIndex: 1,
                name: '背景',
                type: 'bar',
                barWidth: 35,
                data: props.chartData.xAxis.map((item: any) => max + 20),
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: 'transparent' // 100% 处的颜色
                            },
                            {
                                offset: 0.2,
                                color: 'rgba(255,255,255,0.02)' // 100% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(255,255,255,0.1)' // 0% 处的颜色
                            }
                        ],
                        false
                    )
                },
                zlevel: 0,
                label: {
                    show: false
                }
            }
        ]
    }
}

watch(
    () => props,
    newValue => {
        initChart()
    },
    { immediate: true, deep: true }
)
</script>
